<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户信息编辑 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/customer-management.css">
    <link rel="stylesheet" href="../styles/customer-form.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <button class="nav-back-btn" onclick="goBack()">
                    <i class="fas fa-chevron-left"></i>
                    <span>返回</span>
                </button>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">客户管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">客户档案</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active" id="page-title">新增客户</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title" id="main-title">新增客户</h1>
                <p class="page-subtitle" id="main-subtitle">完善客户档案信息，建立360度客户画像</p>
            </div>
            <div class="header-right">
                <button class="btn btn-outline" onclick="resetForm()">
                    <i class="fas fa-undo"></i>
                    重置
                </button>
                <button class="btn btn-outline" onclick="saveAsDraft()">
                    <i class="fas fa-save"></i>
                    保存草稿
                </button>
                <button class="btn btn-primary" onclick="submitForm()">
                    <i class="fas fa-check"></i>
                    <span id="submit-text">保存客户</span>
                </button>
            </div>
        </header>

        <!-- 表单内容 -->
        <form id="customer-form" class="customer-form">
            <div class="form-container">
                <!-- 左侧主要表单 -->
                <div class="form-main">
                    <!-- 基础信息 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-user"></i>
                                基础信息
                            </h2>
                            <span class="section-badge required">必填</span>
                        </div>
                        <div class="section-body">
                            <div class="form-grid">
                                <div class="form-group required">
                                    <label class="form-label" for="customer-name">
                                        客户姓名
                                        <span class="required-mark">*</span>
                                    </label>
                                    <input type="text" id="customer-name" name="name" class="form-input" 
                                           placeholder="请输入客户姓名" required maxlength="50">
                                    <div class="form-help">请输入2-10个字符的真实姓名</div>
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="customer-gender">
                                        性别
                                        <span class="required-mark">*</span>
                                    </label>
                                    <div class="radio-group">
                                        <label class="radio-item">
                                            <input type="radio" name="gender" value="男" checked>
                                            <span class="radio-custom"></span>
                                            <span class="radio-label">男</span>
                                        </label>
                                        <label class="radio-item">
                                            <input type="radio" name="gender" value="女">
                                            <span class="radio-custom"></span>
                                            <span class="radio-label">女</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="birth-date">
                                        出生日期
                                        <span class="required-mark">*</span>
                                    </label>
                                    <input type="date" id="birth-date" name="birth_date" class="form-input" required>
                                    <div class="form-help">年龄将自动计算</div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="calculated-age">年龄</label>
                                    <input type="text" id="calculated-age" class="form-input" readonly 
                                           placeholder="将根据出生日期自动计算">
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="id-card">
                                        身份证号
                                        <span class="required-mark">*</span>
                                    </label>
                                    <input type="text" id="id-card" name="id_card" class="form-input" 
                                           placeholder="请输入18位身份证号" maxlength="18" required>
                                    <div class="form-help">将自动验证格式和校验位</div>
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="work-status">
                                        工作状态
                                        <span class="required-mark">*</span>
                                    </label>
                                    <select id="work-status" name="work_status" class="form-select" required>
                                        <option value="">请选择工作状态</option>
                                        <option value="在职">在职</option>
                                        <option value="退休" selected>退休</option>
                                        <option value="待业">待业</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="occupation">职业信息</label>
                                    <input type="text" id="occupation" name="occupation" class="form-input" 
                                           placeholder="请输入职业信息" maxlength="100">
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="customer-status">
                                        客户状态
                                        <span class="required-mark">*</span>
                                    </label>
                                    <select id="customer-status" name="status" class="form-select" required>
                                        <option value="">请选择客户状态</option>
                                        <option value="潜在客户" selected>潜在客户</option>
                                        <option value="有效客户">有效客户</option>
                                        <option value="已成交客户">已成交客户</option>
                                        <option value="无效客户">无效客户</option>
                                        <option value="黑名单">黑名单</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-address-book"></i>
                                联系方式
                            </h2>
                            <span class="section-badge required">必填</span>
                        </div>
                        <div class="section-body">
                            <div class="form-grid">
                                <div class="form-group required">
                                    <label class="form-label" for="primary-phone">
                                        主要手机
                                        <span class="required-mark">*</span>
                                    </label>
                                    <input type="tel" id="primary-phone" name="primary_phone" class="form-input" 
                                           placeholder="请输入11位手机号" maxlength="11" required>
                                    <div class="form-help">将用于系统登录和重要通知</div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="backup-phone">备用手机</label>
                                    <input type="tel" id="backup-phone" name="backup_phone" class="form-input" 
                                           placeholder="请输入备用手机号" maxlength="11">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="wechat">微信号</label>
                                    <input type="text" id="wechat" name="wechat" class="form-input" 
                                           placeholder="请输入微信号" maxlength="50">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="qq-number">QQ号</label>
                                    <input type="text" id="qq-number" name="qq_number" class="form-input" 
                                           placeholder="请输入QQ号" maxlength="20">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="email">电子邮箱</label>
                                    <input type="email" id="email" name="email" class="form-input" 
                                           placeholder="请输入邮箱地址" maxlength="100">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="preferred-contact">偏好联系方式</label>
                                    <select id="preferred-contact" name="preferred_contact_method" class="form-select">
                                        <option value="电话" selected>电话</option>
                                        <option value="微信">微信</option>
                                        <option value="QQ">QQ</option>
                                        <option value="邮箱">邮箱</option>
                                        <option value="短信">短信</option>
                                    </select>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label" for="address">通讯地址</label>
                                    <textarea id="address" name="address" class="form-textarea" 
                                              placeholder="请输入详细通讯地址" rows="3"></textarea>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="postal-code">邮政编码</label>
                                    <input type="text" id="postal-code" name="postal_code" class="form-input" 
                                           placeholder="请输入邮政编码" maxlength="6">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="preferred-time">偏好联系时间</label>
                                    <input type="text" id="preferred-time" name="preferred_contact_time" class="form-input" 
                                           placeholder="如：工作日上午9-11点" maxlength="50">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 紧急联系人 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-user-friends"></i>
                                紧急联系人
                            </h2>
                            <span class="section-badge required">必填</span>
                        </div>
                        <div class="section-body">
                            <div class="emergency-contacts-container">
                                <div class="emergency-contact-item" data-index="0">
                                    <div class="contact-header">
                                        <h3 class="contact-title">联系人 #1</h3>
                                        <div class="contact-actions">
                                            <label class="primary-contact-toggle">
                                                <input type="radio" name="primary_contact" value="0" checked>
                                                <span class="toggle-label">主要联系人</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-grid">
                                        <div class="form-group required">
                                            <label class="form-label">
                                                联系人姓名
                                                <span class="required-mark">*</span>
                                            </label>
                                            <input type="text" name="emergency_contacts[0][name]" class="form-input" 
                                                   placeholder="请输入联系人姓名" required maxlength="50">
                                        </div>

                                        <div class="form-group required">
                                            <label class="form-label">
                                                关系
                                                <span class="required-mark">*</span>
                                            </label>
                                            <select name="emergency_contacts[0][relationship]" class="form-select" required>
                                                <option value="">请选择关系</option>
                                                <option value="配偶">配偶</option>
                                                <option value="子女" selected>子女</option>
                                                <option value="亲属">亲属</option>
                                                <option value="朋友">朋友</option>
                                                <option value="其他">其他</option>
                                            </select>
                                        </div>

                                        <div class="form-group required">
                                            <label class="form-label">
                                                联系电话
                                                <span class="required-mark">*</span>
                                            </label>
                                            <input type="tel" name="emergency_contacts[0][phone]" class="form-input" 
                                                   placeholder="请输入11位手机号" required maxlength="11">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline add-contact-btn" onclick="addEmergencyContact()">
                                <i class="fas fa-plus"></i>
                                添加联系人
                            </button>
                        </div>
                    </div>

                    <!-- 旅游偏好 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-heart"></i>
                                旅游偏好
                            </h2>
                            <span class="section-badge optional">选填</span>
                        </div>
                        <div class="section-body">
                            <div class="preference-subsections">
                                <!-- 预算偏好 -->
                                <div class="preference-subsection">
                                    <h3 class="subsection-title">预算偏好</h3>
                                    <div class="form-grid">
                                        <div class="form-group">
                                            <label class="form-label" for="budget-range">预算范围</label>
                                            <select id="budget-range" name="budget_range" class="form-select">
                                                <option value="">请选择预算范围</option>
                                                <option value="经济型">经济型 (3000元以下)</option>
                                                <option value="舒适型" selected>舒适型 (3000-8000元)</option>
                                                <option value="品质型">品质型 (8000-15000元)</option>
                                                <option value="豪华型">豪华型 (15000元以上)</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="payment-preference">支付偏好</label>
                                            <select id="payment-preference" name="payment_preference" class="form-select">
                                                <option value="微信支付" selected>微信支付</option>
                                                <option value="支付宝">支付宝</option>
                                                <option value="现金支付">现金支付</option>
                                                <option value="银行转账">银行转账</option>
                                                <option value="刷卡">刷卡</option>
                                            </select>
                                        </div>

                                        <div class="form-group full-width">
                                            <label class="form-label">消费特点</label>
                                            <div class="checkbox-group">
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="consumption_characteristics" value="价格敏感">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">价格敏感</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="consumption_characteristics" value="追求性价比" checked>
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">追求性价比</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="consumption_characteristics" value="注重品质" checked>
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">注重品质</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="consumption_characteristics" value="预算充足">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">预算充足</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 目的地偏好 -->
                                <div class="preference-subsection">
                                    <h3 class="subsection-title">目的地偏好</h3>
                                    <div class="form-grid">
                                        <div class="form-group">
                                            <label class="form-label">国内偏好地区</label>
                                            <div class="checkbox-group">
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="华北">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">华北</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="华东" checked>
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">华东</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="华南">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">华南</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="华中">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">华中</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="西南">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">西南</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="西北">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">西北</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="东北">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">东北</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="domestic_preferences" value="港澳台">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">港澳台</span>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">国外偏好地区</label>
                                            <div class="checkbox-group">
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="东南亚" checked>
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">东南亚</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="日韩">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">日韩</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="欧洲">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">欧洲</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="澳新">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">澳新</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="美洲">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">美洲</span>
                                                </label>
                                                <label class="checkbox-item">
                                                    <input type="checkbox" name="international_preferences" value="其他">
                                                    <span class="checkbox-custom"></span>
                                                    <span class="checkbox-label">其他</span>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="duration-preference">出行天数偏好</label>
                                            <select id="duration-preference" name="duration_preference" class="form-select">
                                                <option value="">请选择出行天数</option>
                                                <option value="短途">短途 (1-3天)</option>
                                                <option value="中途" selected>中途 (4-7天)</option>
                                                <option value="长途">长途 (8-15天)</option>
                                                <option value="超长">超长 (15天以上)</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="accommodation-preference">住宿标准</label>
                                            <select id="accommodation-preference" name="accommodation_preference" class="form-select">
                                                <option value="">请选择住宿标准</option>
                                                <option value="经济型酒店">经济型酒店</option>
                                                <option value="舒适型酒店" selected>舒适型酒店</option>
                                                <option value="高档酒店">高档酒店</option>
                                                <option value="度假村">度假村</option>
                                                <option value="民宿客栈">民宿客栈</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 健康状况 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-heartbeat"></i>
                                健康状况
                            </h2>
                            <span class="section-badge important">重要</span>
                        </div>
                        <div class="section-body">
                            <div class="form-grid">
                                <div class="form-group required">
                                    <label class="form-label" for="health-status">
                                        整体健康状况
                                        <span class="required-mark">*</span>
                                    </label>
                                    <select id="health-status" name="health_status" class="form-select" required>
                                        <option value="">请选择健康状况</option>
                                        <option value="健康良好" selected>健康良好</option>
                                        <option value="健康一般">健康一般</option>
                                        <option value="健康较差">健康较差</option>
                                        <option value="健康很差">健康很差</option>
                                    </select>
                                </div>

                                <div class="form-group required">
                                    <label class="form-label" for="mobility-level">
                                        行动能力
                                        <span class="required-mark">*</span>
                                    </label>
                                    <select id="mobility-level" name="mobility_level" class="form-select" required>
                                        <option value="">请选择行动能力</option>
                                        <option value="行动自如" selected>行动自如</option>
                                        <option value="轻微受限">轻微受限</option>
                                        <option value="需要辅助">需要辅助</option>
                                        <option value="轮椅出行">轮椅出行</option>
                                    </select>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label">慢性疾病</label>
                                    <div class="checkbox-group">
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="高血压">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">高血压</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="心脏病">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">心脏病</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="糖尿病">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">糖尿病</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="关节炎">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">关节炎</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="骨质疏松">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">骨质疏松</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="chronic_diseases" value="无">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">无</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label" for="medications">用药情况</label>
                                    <textarea id="medications" name="medications" class="form-textarea" 
                                              placeholder="请详细记录常用药品名称、服药时间和剂量等" rows="3"></textarea>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label">饮食限制</label>
                                    <div class="checkbox-group">
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="无特殊要求" checked>
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">无特殊要求</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="清淡饮食">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">清淡饮食</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="低盐低脂">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">低盐低脂</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="糖尿病餐">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">糖尿病餐</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="素食">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">素食</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="dietary_restrictions" value="回族餐">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">回族餐</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="medical-insurance">医疗保险类型</label>
                                    <input type="text" id="medical-insurance" name="medical_insurance_type" class="form-input" 
                                           placeholder="如：城镇职工医疗保险" maxlength="100">
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="travel-insurance">旅游保险情况</label>
                                    <textarea id="travel-insurance" name="travel_insurance_info" class="form-textarea" 
                                              placeholder="请描述旅游保险购买情况" rows="2"></textarea>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label" for="special-needs">特殊需求说明</label>
                                    <textarea id="special-needs" name="special_needs" class="form-textarea" 
                                              placeholder="请详细描述出行时的特殊需求和注意事项" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 家庭信息 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fas fa-home"></i>
                                家庭信息
                            </h2>
                            <span class="section-badge optional">选填</span>
                        </div>
                        <div class="section-body">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label" for="marital-status">婚姻状况</label>
                                    <select id="marital-status" name="marital_status" class="form-select">
                                        <option value="">请选择婚姻状况</option>
                                        <option value="已婚" selected>已婚</option>
                                        <option value="丧偶">丧偶</option>
                                        <option value="离异">离异</option>
                                        <option value="未婚">未婚</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="decision-style">决策模式</label>
                                    <select id="decision-style" name="decision_style" class="form-select">
                                        <option value="">请选择决策模式</option>
                                        <option value="自主决策">自主决策</option>
                                        <option value="咨询决策" selected>咨询决策</option>
                                        <option value="共同决策">共同决策</option>
                                        <option value="代为决策">代为决策</option>
                                    </select>
                                </div>

                                <div class="form-group full-width">
                                    <label class="form-label">决策影响因素</label>
                                    <div class="checkbox-group">
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="influence_factors" value="价格因素" checked>
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">价格因素</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="influence_factors" value="安全因素" checked>
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">安全因素</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="influence_factors" value="健康因素" checked>
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">健康因素</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="influence_factors" value="家人意见">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">家人意见</span>
                                        </label>
                                        <label class="checkbox-item">
                                            <input type="checkbox" name="influence_factors" value="朋友推荐">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">朋友推荐</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- 家庭成员 -->
                            <div class="family-members-section">
                                <h3 class="subsection-title">家庭成员</h3>
                                <div class="family-members-container">
                                    <!-- 家庭成员将通过JavaScript动态添加 -->
                                </div>
                                <button type="button" class="btn btn-outline add-family-member-btn" onclick="addFamilyMember()">
                                    <i class="fas fa-plus"></i>
                                    添加家庭成员
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧辅助信息 -->
                <div class="form-sidebar">
                    <!-- 推荐人信息 -->
                    <div class="sidebar-section">
                        <div class="sidebar-header">
                            <h3 class="sidebar-title">
                                <i class="fas fa-user-plus"></i>
                                推荐人信息
                            </h3>
                        </div>
                        <div class="sidebar-body">
                            <div class="form-group">
                                <label class="form-label" for="referrer-name">推荐人姓名</label>
                                <input type="text" id="referrer-name" name="referrer_name" class="form-input" 
                                       placeholder="请输入推荐人姓名" maxlength="50">
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="referrer-phone">推荐人电话</label>
                                <input type="tel" id="referrer-phone" name="referrer_phone" class="form-input" 
                                       placeholder="请输入推荐人电话" maxlength="20">
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="referrer-relation">推荐关系</label>
                                <select id="referrer-relation" name="referrer_relation" class="form-select">
                                    <option value="">请选择推荐关系</option>
                                    <option value="朋友推荐">朋友推荐</option>
                                    <option value="老客户推荐">老客户推荐</option>
                                    <option value="网络推荐">网络推荐</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="referrer-date">推荐时间</label>
                                <input type="date" id="referrer-date" name="referrer_date" class="form-input">
                            </div>
                        </div>
                    </div>

                    <!-- 客户标签 -->
                    <div class="sidebar-section">
                        <div class="sidebar-header">
                            <h3 class="sidebar-title">
                                <i class="fas fa-tags"></i>
                                客户标签
                            </h3>
                        </div>
                        <div class="sidebar-body">
                            <div class="tag-selection">
                                <div class="tag-category">
                                    <h4 class="tag-category-title">价值分类</h4>
                                    <div class="tag-options">
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="VIP客户">
                                            <span class="tag-checkbox tag-vip">VIP客户</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="优质客户" checked>
                                            <span class="tag-checkbox tag-quality">优质客户</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="普通客户">
                                            <span class="tag-checkbox tag-normal">普通客户</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="tag-category">
                                    <h4 class="tag-category-title">服务特点</h4>
                                    <div class="tag-options">
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="易沟通" checked>
                                            <span class="tag-checkbox tag-communication">易沟通</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="需要关怀">
                                            <span class="tag-checkbox tag-care">需要关怀</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="决策慢">
                                            <span class="tag-checkbox tag-slow">决策慢</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="tag-category">
                                    <h4 class="tag-category-title">健康状态</h4>
                                    <div class="tag-options">
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="身体健康" checked>
                                            <span class="tag-checkbox tag-health">身体健康</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="需要照顾">
                                            <span class="tag-checkbox tag-special-care">需要照顾</span>
                                        </label>
                                        <label class="tag-option">
                                            <input type="checkbox" name="tags" value="行动不便">
                                            <span class="tag-checkbox tag-mobility">行动不便</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 表单提示 -->
                    <div class="sidebar-section">
                        <div class="sidebar-header">
                            <h3 class="sidebar-title">
                                <i class="fas fa-lightbulb"></i>
                                填写提示
                            </h3>
                        </div>
                        <div class="sidebar-body">
                            <div class="form-tips">
                                <div class="tip-item">
                                    <i class="fas fa-star"></i>
                                    <span>标有 * 的字段为必填项</span>
                                </div>
                                <div class="tip-item">
                                    <i class="fas fa-phone"></i>
                                    <span>主要手机号将用于系统登录</span>
                                </div>
                                <div class="tip-item">
                                    <i class="fas fa-heartbeat"></i>
                                    <span>健康信息关系出行安全，请如实填写</span>
                                </div>
                                <div class="tip-item">
                                    <i class="fas fa-save"></i>
                                    <span>可随时保存草稿，稍后继续编辑</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </main>

    <!-- 确认保存模态框 -->
    <div class="modal-overlay" id="save-confirm-modal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">确认保存</h3>
                <button class="modal-close" onclick="closeModal('save-confirm-modal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p>确定要保存客户信息吗？</p>
                <div class="save-options">
                    <label class="save-option">
                        <input type="radio" name="save-type" value="draft" checked>
                        <span class="option-label">保存为草稿</span>
                        <span class="option-desc">可稍后继续编辑</span>
                    </label>
                    <label class="save-option">
                        <input type="radio" name="save-type" value="final">
                        <span class="option-label">正式保存</span>
                        <span class="option-desc">完成客户档案创建</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('save-confirm-modal')">取消</button>
                <button class="btn btn-primary" onclick="confirmSave()">保存</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/customer-form.js"></script>
</body>
</html>